<template>
	<div class="centerRight2">
		<div class="bg-color-black">
			<div class="d-flex pt-2 pl-2">
				<span>
					<i class="iconfont icon-vector" />
				</span>
				<div class="d-flex">
					<span class="fs-xl text mx-2">设置默认堆肥时间</span>
				</div>
			</div>
			<div class="d-flex mt-1 jc-center body-box">
				<div
					:class="[value == tempVal ? 'confirm_text' : 'toBeConfirm_text']"
					class="current-time-div"
				>
					{{ value }}
				</div>

				<div
					style="
						font-size: 23px;
						position: absolute;
						left: 7px;
						top: 255px;
						font-family: 'Hanalei Fill', cursive;
					"
				>
					<i class="iconfont icon-tongji2" style="margin-right: 10px"></i
					>快捷设置堆肥时间按钮
				</div>

				<div class="time-group-div">
					<div
						:class="{ selected_text: textIndex == index ? true : false }"
						class="time-div"
						v-for="(t, index) in [24, 36, 48]"
						@click="setHourQuick(t, index)"
					>
						{{ t }}
					</div>
				</div>

				<el-slider
					style="width: 220px; margin-top: 30px"
					v-model="value"
					:step="1"
					:min="24"
					:max="48"
				/>

				<div @click="setHour" class="confirm">确 定</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue'

	const value = ref(24)

	const tempVal = ref(24)

	const textIndex = ref(0)

	const emit = defineEmits(['setHour'])

	const setHour = () => {
		tempVal.value = value.value
		emit('setHour', value.value + '')
	}

	const setHourQuick = (t, index) => {
		value.value = t
		textIndex.value = index
		tempVal.value = value.value

		emit('setHour', value.value + '')
	}
</script>

<style lang="scss" scoped>
	@import url('https://fonts.font.im/css?family=Pacifico');
	$box-height: 900px;

	.centerRight2 {
		padding: 16px;
		padding-top: 20px;
		height: $box-height;
		border-radius: 5px;
		.bg-color-black {
			height: $box-height - 30px;
			border-radius: 10px;
		}
		.text {
			color: #c3cbde;
			font-family: 'Hanalei Fill', cursive;
			font-size: 23px;
		}
		:deep(.body-box) {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.current-time-div {
				position: absolute;
				top: 80px;
				letter-spacing: 10px;
				font-size: 8em;
				font-family: 'Pacifico', cursive;
				text-shadow: 0 0px 25px #9d9fb3;
			}

			.confirm_text {
				color: rgb(82, 218, 82);
			}

			.toBeConfirm_text {
				color: yellow;
			}

			.time-group-div {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				width: 260px;
				height: 220px;
				margin-bottom: 20px;
			}
			.time-div {
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 110px;
				font-size: 6em;
				margin: 5px 10px;
				font-family: 'Pacifico', cursive;
			}
			.selected_text {
				color: #158fc3;
				text-shadow: 0 0px 25px #9d9fb3;
			}

			// 禁用时的样式
			.el-slider__runway.disabled .el-slider__bar {
				background-color: #1b466c;
			}
			.el-slider__button {
				width: 20px;
				height: 65px;
				background: #7e9aff;
				border: none;
				border-radius: 3px;
			}
			.el-slider__bar {
				background-color: #1b466c;
				height: 40px;
			}
			.el-slider__runway {
				background-color: #e0eaf3;
				height: 40px;
				border-radius: 7px;
			}
			.el-slider__button-wrapper {
				top: -13px;
			}
		}
	}

	.confirm {
		position: absolute;
		bottom: 100px;
		width: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 65px;
		background-color: rgb(0, 0, 0);
		border: 4px solid rgba(104, 131, 214, 0.751);
		border-radius: 7px;
		font-size: 28px;
		font-weight: bolder;
		box-shadow: 0 0px 35px #28327d;
	}
	.confirm:hover {
		background-color: rgba(57, 57, 57, 0.265);
		border: 6px solid #0c1d9e;
		box-shadow: 0 0px 25px #6b71a4;
		transition: all 0.4s ease;
		cursor: pointer;
	}
</style>
